<template>
  <div class="teaching">
    <div class="header">
      <div class="left">
        <div class="title">示教管理</div>
        <div class="button">
          <el-button icon="el-icon-plus" @click="maskShow = true"
            >新增</el-button
          >
          <el-button icon="el-icon-delete" @click="removeAll">删除</el-button>
        </div>
      </div>
      <div class="right">
        <search-input @searchResult="search"></search-input>
      </div>
    </div>
    <div class="container">
      <el-checkbox-group v-model="ids">
        <div
          class="item"
          v-for="item in tableData"
          :key="item.id"
          @mouseenter="getEnterIds(item.id)"
          @mouseleave="getLeaveIds"
        >
          <div class="option">
            <el-checkbox
              :label="item.id"
              v-if="item.id === moveId || ids.includes(item.id)"
            ></el-checkbox>
            <div class="icon">
              <i class="el-icon-folder"></i>
            </div>
            <div>
              <p class="title">视频名称</p>
              <p class="text">{{ item.videoName }}</p>
            </div>
            <div>
              <p class="title">文件大小</p>
              <p class="text">{{ item.videoSize }}</p>
            </div>
            <div v-for="(param, index) in addParamsList" :key="index">
              <p class="title param">{{ param.title }}</p>
              <p class="text">{{ item[param.code] }}</p>
            </div>
          </div>
          <div class="handle">
            <i class="el-icon-edit" @click="edit(item.id)"></i>
            <router-link
              tag="i"
              class="el-icon-video-play"
              :to="{
                name: 'detail',
                query: {
                  id: item.id,
                },
              }"
            ></router-link>
            <i class="el-icon-delete" @click="remove(item.id)"></i>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="footer">
      <Pagination :total="total"></Pagination>
    </div>
    <transition name="el-fade-in-linear">
      <div v-if="maskShow" class="transition-box mask">
        <div class="form">
          <div class="title">{{ editFlag ? "修改视频" : "添加视频" }}</div>
          <el-form label-position="top" label-width="80px" :model="addForm">
            <el-form-item label="视频名称">
              <el-input
                v-model="addForm.videoName"
                placeholder="请输入视频名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="选择视频">
              <Upload :limit="5" :isMultiple="true" @success="videoUpload" />
            </el-form-item>
            <el-form-item
              :label="item.title"
              v-for="(item, index) in addParamsList"
              :key="index"
            >
              <Upload @success="(data) => upload(data, item.code)" />
            </el-form-item>
          </el-form>
          <div class="button">
            <el-button type="info" @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </div>
      </div>
    </transition>

    <success-tip v-if="success" :text="text"></success-tip>
  </div>
</template>

<script>
import { getList, insertVideo, deleteVideo } from "@/api/teaching";
import { Upload } from "element-ui";
export default {
  name: "Teaching",
  data() {
    return {
      text: "保存成功",
      maskShow: false,
      addForm: {
        videoName: "",
        diskClips: [],
        networkClips: [],
        rockerParam: "",
        throttleParam: "",
        footRudderParam: "",
        motorParam: "",
        controllerParam: "",
        mechanicalArmParam: "",
      },
      addParamsList: [
        {
          code: "rockerParam",
          title: "摇杆参数",
        },
        {
          code: "throttleParam",
          title: "油门参数",
        },
        {
          code: "footRudderParam",
          title: "脚舵参数",
        },
        {
          code: "motorParam",
          title: "电机参数",
        },
        {
          code: "controllerParam",
          title: "控制器参数",
        },
        {
          code: "mechanicalArmParam",
          title: "机械臂参数",
        },
      ],
      rockerOption: [],
      throttleOption: [],
      footRudderOption: [],
      motorOption: [],
      controllerOption: [],
      mechanicalArmOption: [],
      success: false,
      tableData: [],
      total: 0,
      ids: [],
      searchData: {
        keyword: "",
        pageNum: 1,
        pageSize: 10,
      },
      adviceParams: [],
      moveId: null,
      editFlag: false,
    };
  },
  methods: {
    checkEmptyValues(obj) {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          const value = obj[key];
          if (
            (typeof value === "string" && value === "") ||
            (Array.isArray(value) && value.length === 0)
          ) {
            return false;
          }
        }
      }
      return true;
    },
    videoUpload(data) {
      this.addForm.diskClips.push(data.diskClip);
      this.addForm.networkClips.push(data.networkClip);
    },
    upload(data, code) {
      this.addForm[code] = data.networkClip;
    },
    search(val) {
      this.searchData.keyword = val;
      this.getTableData();
    },
    getEnterIds(id) {
      this.moveId = id;
    },
    getLeaveIds() {
      this.moveId = null;
    },
    save() {
      if (this.checkEmptyValues(this.addForm)) {
        insertVideo(this.addForm).then((res) => {
          this.maskShow = false;
          this.successTip(this, "添加成功");
          this.getTableData();
        });
      } else {
        this.$modal.msgError("存在必传项未传入值！");
      }
    },
    edit(id) {
      this.editFlag = true;
      this.maskShow = true;
      let obj = this.tableData.filter((el) => el.id == id)[0];
      this.addForm.videoName = obj.videoName;
      // this.addForm.diskClip = obj.diskClip;
      // this.addForm.rockerParam.push(obj.rockerParam);
      // this.addForm.throttleParam.push(obj.throttleParam);
      // this.addForm.footRudderParam.push(obj.footRudderParam);
      // this.addForm.motorParam.push(obj.motorParam);
      // this.addForm.controllerParam.push(obj.controllerParam);
      // this.addForm.mechanicalArmParam.push(obj.mechanicalArmParam);
    },
    remove(id) {
      this.ids.push(id);
      deleteVideo({ ids: this.ids }).then((res) => {
        this.successTip(this, "删除成功");
        this.ids = [];
        this.getTableData();
      });
    },
    removeAll() {
      deleteVideo({ ids: this.ids }).then((res) => {
        this.successTip(this, "删除成功");
        this.getTableData();
      });
    },
    getIds(param, option) {
      let ids = [];
      for (let item of option.paramList) {
        if (param.includes(item.paramName)) {
          ids.push(item.paramId);
        }
      }
      return ids;
    },
    async getTableData() {
      await getList(this.searchData)
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.tableData = [];
          this.total = 0;
        });
    },
    handleSuccess(res, file, option) {
      if (res.code === 200) {
        this.addForm.diskClip = res.data.networkClip;
        this.addForm.networkClip = res.data.networkClip;
      }
    },
    cancel() {
      this.maskShow = false;
      this.resetForm();
    },
    resetForm() {
      this.addForm = {
        videoName: "",
        diskClips: [],
        networkClips: [],
        rockerParam: "",
        throttleParam: "",
        footRudderParam: "",
        motorParam: "",
        controllerParam: "",
        mechanicalArmParam: "",
      };
    },
  },
  created() {
    this.getTableData();
  },
};
</script>
<style lang="scss">
.teaching {
  position: relative;
  padding: 36px 42px;

  .header {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        height: 26px;
        line-height: 26px;
        font-size: 26px;
        color: #333333;
      }

      .button {
        margin-top: 36px;
        display: flex;
        height: 48px;

        .el-button {
          padding: 0 28px;
          font-size: 16px;
          font-weight: bold;
          height: 48px;
          border-radius: 12px;
          border: 1px solid #e4e4e4;
        }

        .el-button + .el-button {
          margin-left: 30px;
        }
      }
    }

    .right {
      height: 66px;
      line-height: 66px;
    }
  }

  .container {
    margin-top: 4px;
    height: 688px;

    .el-checkbox-group {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size: 16px;

      .item {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1700px;
        height: 88px;
        background: #e4e4e4;
        border-radius: 8px;
        background-color: rgba(228, 228, 228, 0.3);

        &:hover {
          box-shadow: 0 0 20px 0 rgba($color: #000000, $alpha: 0.1);
        }

        .option {
          padding: 22px 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          & > div {
            width: 120px;

            .text {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          div + div {
            margin-left: 36px;
          }

          .el-checkbox {
            margin-right: 20px;

            .el-checkbox__label {
              display: none;
            }
          }

          .icon {
            width: 38px;
            height: 38px;
            text-align: center;
            line-height: 38px;
            font-size: 18px;
            font-weight: bold;
            border: 1px solid #eee;
            border-radius: 50%;
            color: #365eff;
            background-color: #fff;
          }

          p {
            margin: 0;
          }

          .title {
            height: 16px;
            line-height: 16px;
            color: #999999;
          }

          .param {
            width: 130px;
          }

          .text {
            margin-top: 10px;
            height: 18px;
            line-height: 18px;
            font-size: 18px;
            font-weight: 500;
            color: #333333;
          }
        }

        .handle {
          padding: 32px 30px;
          display: flex;
          align-items: center;

          i + i {
            margin-left: 24px;
          }

          i {
            cursor: pointer;
            font-size: 24px;
            color: #365eff;

            &:last-child {
              color: red;
            }
          }
        }
      }
    }
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.5);

    .form {
      position: absolute;
      top: calc(50% - 300px);
      left: calc(50% - 308px);
      width: 616px;
      background: #ffffff;
      border-radius: 24px;
      overflow: hidden;

      .title {
        margin: 24px;
        height: 20px;
        line-height: 20px;
        font-size: 20px;
        font-weight: 500;
        color: #333333;
      }

      .el-form {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 568px;

        .el-form-item {
          margin-bottom: 20px;
          padding: 0 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 274px;
          height: 88px;
          background: #f7f7f7;
          border-radius: 12px;

          .el-form-item__label {
            padding: 0;
            line-height: 14px;
            font-weight: 400;
            color: #666;
          }

          .el-form-item__content {
            height: 20px;
            line-height: 20px;

            .el-select {
              .el-tag {
                margin: -4px 6px 0 0;
              }
            }

            .el-input {
              .el-input__suffix {
                display: none;
              }

              .el-input__inner {
                padding: 0;
                height: 20px;
                width: 100%;
                line-height: 20px;
                border: none;
                border-radius: 0;
                background-color: #f7f7f7;
                font-size: 16px;
                font-weight: 500;
                color: #333;
              }
            }

            .upload-demo {
              display: flex;
              .el-upload {
                .el-upload__text {
                  width: 56px;
                }
              }
              .el-upload-list__item {
                margin: 0;
                line-height: 1.4;
              }
              .el-upload-list__item-name {
                width: 140px;
              }
            }
          }
        }
      }

      .button {
        margin: 10px 0 36px;
        padding: 0 64px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 48px;

        .el-button {
          width: 204px;
          height: 48px;
          border-radius: 12px;
        }
      }
    }
  }
}
</style>
